<template>
  <span>
    <el-button type="primary"
               size="small"
               @click.stop="handleApprove()">审 批
    </el-button>
    <el-dialog title="审 批" width="500px" :visible="dialogVisible">
      <el-form label-width="80px">
        <el-form-item
          label="审批建议">
          <el-input v-model="approveSuggestions" type="textarea"
            :rows="4" placeholder="请输入审批建议"></el-input>
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button type="primary" size="small"
          :loading="loading"
          @click="approve(true)">审批通过
        </el-button>
        <el-button type="primary" size="small"
          :loading="loading"
          @click="approve(false)">审批不通过
        </el-button>
        <el-button size="small"
          :loading="loading"
          @click="dialogVisible=false">取 消</el-button>
      </template>
    </el-dialog>
  </span>
</template>

<script>
  export default {
    name: 'ApproveButton',
    data(){
      return {
        dialogVisible: false,
        approveSuggestions: '',
        loading: false
      }
    },
    props: {
      approveBefore: Function
    },
    methods: {
      handleApprove() {
        let callback = () => this.dialogVisible = true
        if(this.approveBefore){
          this.approveBefore(callback)
        }else{
          callback()
        }
      },
      approve(result){
        let done = () => {
          this.dialogVisible = false
          this.loading = false
        }
        let loading = () => {
          this.loading = false
        }
        if(!result && this.validatenull(this.approveSuggestions)){
          this.$message.info('请输入审批建议')
          return
        }
        let params = {
          result: result,
          approveSuggestions: this.approveSuggestions
        }
        this.$emit('approve', params, done, loading)
      }
    }
  }
</script>

<style>
</style>
